<template>
    <div class="charts" ref="charts"></div>
</template>
<script>
    import * as echarts from 'echarts';
    export default {
        name: 'SaleBarChart',
        props: ['title'],
        data() {
            return {
                myChart: null, // 图表的实例对象
                barData: [100, 122, 200, 334, 390, 330, 220, 300, 122, 200, 334, 390, 330]
            }
        },
        mounted() {

            this.myChart = echarts.init(this.$refs.charts)
            this.myChart.setOption({
                title: {
                    text: this.title + '趋势'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '40%',
                        data: this.barData
                    }
                ]
            })
        },

        watch: {
            // 监听当前标题是销售额还是访问量
            title() {
                if (this.title == '访问量') {
                    this.data = [200, 300, 120, 225, 124, 450, 150, 200, 135, 410, 135, 200, 100]
                } else if (this.title == '销售额') {
                    this.data = [100, 122, 200, 334, 390, 330, 220, 300, 122, 200, 334, 390, 330]
                }
                this.myChart.setOption({
                    title: {
                        text: this.title + '趋势'
                    },
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '40%',
                            data: this.data
                        }
                    ]
                })
            }
        }
    }
</script>
<style scoped>
    .charts {
        width: 100%;
        height: 400px;
    }
</style>